<template>
  <div class="login" :style="{backgroundImage: 'url(' + require('@/assets/images/loginbc.png') + ')'}">
    <el-card class="login-card">
      <p class="login-title">登录</p>
      <el-input class="input" v-model="username" placeholder="请输入用户名" @keyup.enter.native="login"></el-input>
      <el-input class="input" v-model="password" placeholder="请输入密码" @keyup.enter.native="login"></el-input>
      <el-button class="button" type="primary" @click="login">登录</el-button>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    login() {
      if (!this.username || !this.password) {
        return this.$message({
          type: "error",
          message: "请输入账号密码"
        })
      }
      this.$http.get(`/admin/api/login?username=${this.username}&password=${this.password}`).then(res => {
        console.log(res)
        if (res.data.status == 200) {
          localStorage.setItem("token",res.data.data.token)
          localStorage.setItem('time',String(new Date().getTime()))
          this.$store.commit("updateUserInfo",res.data.data.userInfo)
          this.$router.replace("/index")
          this.$message({
            message: res.data.message,
            type: "success"
          })
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
  .login {
    width: 100%;
    height: 100vh;
    background-size: 100% 100%;
    .login-card {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
      width: 400px;
      height: 300px;
      background-color: rgba(256, 256, 256, .5);
      .login-title {
        font-size: 30px;
        font-weight: bold;
        text-align: center;
      }
      .input {
        margin-top: 30px;
      }
      .button {
        position: absolute;
        bottom: 30px;
        left: 50%;
        transform: translateX(-50%);
      }
    }
  }
</style>
